<template>
	<view class="containerbox">
		<uv-navbar title="词汇量测试" auto-back placeholder />
		
		<template v-if="!loading">
			<view class="px-60 text-center w-full mt-100 containerbox" v-if="alltopic.length>0">
				<view class="text-72 color-3a font-weight-700">{{alltopic[topic].word}}</view>
				<view class="text-26 color6 mt-20 mb-60">{{countDown==10?'停留时间超过10秒，建议选择不认识': countDown +'s'}} </view>
				
				<scroll-view scroll-y class="containerbox">
					<view class="mb-30 p-35 round-lg w-full color-3a relative flex-center word-item"
						v-for="({prefix,content},index) in alltopic[topic].options" :key="index"
						@tap.stop="checkFn(prefix,index)"
						:class="[idx == 1 && check == index ? 'bg1' :'', idx == 0 && check == index ? 'bg2' :'', show==prefix?'bg1':'']"
					 >
						<text class="text-30">{{ content }}</text> 
						<view class="w-40 h-40 absolute" v-if="idx == 1 && check == index">
							<uv-image :src="`${imgPath}mine/yes.svg`" width="40rpx" height="40rpx" />
						</view>
						
						<view class="w-40 h-40 absolute" v-else-if="idx == 0 && check == index">
							<uv-image :src="`${imgPath}mine/close.svg`" width="40rpx" height="40rpx" />
						</view>
					</view>
					
					<view class="mb-30 p-35 round-lg w-full color6 relative flex-center word-item" :class="notShow?'bg2':''" @click="notKnow">
						<text class="text-30">不认识</text> 
					</view>
					
					<view style="height: 24rpx" />
				</scroll-view>
			</view>
			
			<view class="flex-center justify-around w-full px-60 py-30 border-top">
				<view class="w-90 h-90 bgc-red round-base flex-center">
					<view class="text-36 w-70 h-70 color2 bgc-white round-full flex-center">{{ err }}</view>
				</view>
				
				<view class="w-90 h-90 bgc-green round-base flex-center">
					<view class="text-36 w-70 h-70 color1 bgc-white round-full flex-center">{{ read }}</view>
				</view>
				
				<view class="w-90 h-90 bgc-primary round-base flex-center">
					<view class="text-36 w-70 h-70 color3 bgc-white round-full flex-center">{{ alltopic.length - err - read }}</view>
				</view>
			</view>
		</template>
		
		<view class="my-auto">
			<dw_loading :status="loading" />
		</view>
		
		<modal v-model="upShow" @confirm="lookFn" />
		<audio />
	</view>
</template>

<script setup>
	
	import { imgPath } from '@/common/config.js'
	import { ref, onBeforeUnmount , onMounted } from 'vue'
	import { onLoad } from "@dcloudio/uni-app"
	import { testWordsList ,tsetAnswer} from '@/common/apis/study'
	import api from '@/utils/index.js'
	import modal from './components/modal.vue'
	
	const loading = ref(true)
	const popupRef=ref(null)
	const idx=ref(-1)
	const check=ref(-1)
	const topic = ref(0)
	const err =ref(0)
	const read=ref(0)
	const alltopic=ref([])
	
	const answers=ref([])
	const params=ref('10')
	const state=ref(true)
	
	const show=ref('')
	
	const timer = ref(null)
	const timer1 = ref(null)
	const countDown = ref(10)
	
	let upShow = ref()
	
	let notShow = ref(false)
	
	// let videosrc = ref('')
	// const VIDEOREF = ref(null)
	// onMounted(() => VIDEOREF.value = uni.createVideoContext('myVideo'))
	
	onLoad(param => {
		params.value = param.id
		testWordsList(param).then(res=>{
			console.log(res)
			alltopic.value=res
			uni.$fui.sleep(() => loading.value = false)
			uni.useAudio.src(alltopic.value[topic.value].voiceFile.url)
			// videosrc.value=alltopic.value[topic.value].voiceFile.url
			//进入倒计时
		
		if (!timer.value) {
			timer.value = setInterval(()=>{
				countDown.value--
				if(countDown.value<=0){
					// notKnow()
					// clearInterval(timer.value)
					// timer.value=null
					countDown.value= 10
					notKnow()
					
				}
			},1000)
		}
		})
		// alltopic.value=data
		// console.log('data',api.debounce())
	})
	
	function closeTimer(){
		// clearInterval(timer.value)
		// timer.value = null
		countDown.value = 10
		
	}
	function startTimer(){
		uni.useAudio.src(alltopic.value[topic.value].voiceFile.url)
		// videosrc.value=alltopic.value[topic.value].voiceFile.url
		show.value=''
	
	}
	function Answer(data){
		tsetAnswer(data).then(res=>{
			console.log(res)
			// if(res.status==2){
				setTimeout(()=>{
					upShow.value = true
				},1000)
				// popupRef.value.open()
			// }
			clearInterval(timer.value)
			timer.value=null
			clearInterval(timer1.value)
			timer1.value=null
		})
	}
	const notKnow=api.debounce(()=>{//不认识
		notShow.value=true
		closeTimer()
		show.value = alltopic.value[topic.value].corrects
		err.value++
		answers.value.push({//答题数据
			id:alltopic.value[topic.value].id,
			answer:'不认识'
		})
		
		let r=[]
		answers.value.forEach(item=>{
			r.push(item)
		})
		let data={
			id:params.value,
			answers:r
		}
		if(read.value<3&&state.value&&err.value==5){//连续错误
			console.log(answers.value)	
			console.log(data)
			Answer(data)
			return
		}else if(err.value>=7){//错了7道 
			Answer(data)
			return
		}
		setTimeout(()=>{//进入下一题
			notShow.value=false
			topic.value++
			startTimer()
		},800)
	},300,false)
	// function checkFn(){debounce()}
	let isRun = ref()
	const checkFn=api.debounce((prefix,i)=>{//选择词汇
		closeTimer()
		// if (isRun.value) return
		// isRun.value = true
		
		console.log(prefix,alltopic.value[topic.value].corrects)
		check.value=i
		if(prefix==alltopic.value[topic.value].corrects){//正确
			idx.value=1
			if(read.value>0){
				state.value=false
			}
			read.value++
			
		}else{//错误   连续错5道 直接结束答题    如果错了7道 也结束 
			idx.value=0
			show.value=alltopic.value[topic.value].corrects
			err.value++
			if(err.value>5){
				state.value=true
			}
		}
		answers.value.push({//答题数据
			id:alltopic.value[topic.value].id,
			answer:prefix
		})
		// let r=[]
		// answers.value.forEach(item=>{
		// 	r.push({
		// 		id:item.id,
		// 		answer:item.answer
		// 	})
		// })
		let data={
				id:params.value,
				answers:answers.value
			}
		console.log('num',topic.value,alltopic.value.length)
		if(topic.value>=(alltopic.value.length)-1){//答题答完
			Answer(data)
			return
		}
		if(read.value<3&&state.value&&err.value==5){//连续错误
			console.log(answers.value)	
			console.log(data)
			Answer(data)
			return
		}else if(err.value>=7){//错了7道 
			Answer(data)
			return
		}
		// idx.value=i
		setTimeout(()=>{//进入下一题
		console.log('set',topic.value,alltopic.value.length)
			topic.value++
			idx.value = -1
      show.value = -1
			if(topic.value>=alltopic.value.length){//所有题目达完
				topic.value=alltopic.value.length-1
				return
			}
			startTimer()
		},800)
		console.log(data)
	},300,false)

	onBeforeUnmount(()=>{
		clearInterval(timer.value)
		timer.value = null
	})
	
	let lookFn = () => uni.redirectTo({ url: `/pages/other/report?id=${params.value}` })
	
</script>
<style>page{background: #FFFFFF}</style>
<style scoped lang="scss">
	.word-item{background-color: #F7F8FA}
	.popup_test{background: url(https://dwzx.dingwei.cn/applet/static/mine/bj_2.svg);background-repeat: no-repeat}
	.color-3a{color: #3A3F5E}
	.color-3a{color: #3A3F5E}
	.color1a{color: #1A1A1A}
	.color6{color: #626780}
	.color9{color: #999999}
	.color1{color: #40D463}
	.color2{color: #FF5252}
	.color3{color: #0B9AFF}
	.bg1{background: #E6FFEC;color: #40D463}
	.bg2{background: #FFF1F1;color: #FF5252}
	.absolute{right: 20rpx}
	video{position: fixed;top: -1111px}
</style>